<template>
    <div class="login">
        <div class="baseboard">
            <div class="left-image"></div>
            <div class="right-form">
                <div class="login-logo"></div>
                <div>
                    <el-form class="el-form">
                        <el-input v-model="account" prefix-icon="User" placeholder="账号/admin"
                            @keydown.enter="login"></el-input>
                        <el-input show-password v-model="password" prefix-icon="Unlock" placeholder="密码/123456"
                            @keydown.enter="login"></el-input>
                        <el-button @click="login" :loading="loading">登录</el-button>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
/**
 * @des 登录
 * @create Gzw
 * @edit 2022-12-15
 *
 */
import { ref } from "vue";
import request from "@/api/request.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { userInfo, routerData, breadcrumbList, menuInfo } from "@/store/pinia";
import { getRouter } from "@/router/contentRouter";
import HomeView from "@/views/HomeView.vue";
const router = useRouter();
const account = ref();
const password = ref();
let loading = ref(false)
const login = () => {
    loading.value = true
    request
        .post("/login", { account: account.value, password: password.value })
        .then(async (res) => {
            // console.log(res);
            loading.value = false
            if (res.code != 200) {
                ElMessage({
                    message: res.msg,
                    type: "error",
                });
                return;
            }
            ElMessage({
                message: "登录成功",
                type: "success",
            });
            setSessionAndToken(res)
            getAccountInfo()
            // 异步路由添加
            await getRouter(router)
            userInfo().updateIsLogin(true);
            router.push("/home/index");
            menuInfo().updateMenuName('dashboard');
            menuInfo().updatePath('/home/index');
            breadcrumbList().updateBreadcrumbList({
                index: 'dashboard',
                icon: 'Odometer',
                title: '首页',
                path: '/home/index',
                componentName: 'HomeIndex',
                closable: 1,
            }, 'add')
        }).catch(err => {
            loading.value = false
            ElMessage({
                message:err,
                type: "error",
            });
        });
};
/* 保存session和token */
const setSessionAndToken = (res)=>{
    sessionStorage.setItem('session',res.data.session)
    sessionStorage.setItem('token',res.data.token)
}
/* 账号信息 */
const getAccountInfo = ()=>{
    request.post('/user').then(res=>{
        if(res.code != 200){
            ElMessage({
                message: res.msg,
                type: "error",
            });
            return
        }
        userInfo().updateData(res.data);
    })
}
</script>
<style scoped lang="scss">
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: url("../../assets/login/bgc.svg");
    background-size: cover;
    background-color: #eee;
    min-height: 100vh;
}

.baseboard {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 96%;
    height: 94%;
    background-color: #fffc;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 0 70px;

    .left-image {
        width: 53%;
        height: 63%;
        background: url("../../assets/login/login_left0.png");
        background-size: 100% 100%;
    }

    .right-form {
        width: 30%;
        height: 400px;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 2px 3px 7px #0003;
    }

    .login-logo {
        width: 80%;
        height: 80px;
        margin: auto;
        // background: url('../../assets/logo.png');
        background-size: 100% 100%;
    }
}

.el-form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 300px;

    .el-input {
        width: 80%;
        height: 52px;
        margin: 20px;
        padding: 0 !important;
        margin: 0;

        ::v-deep .el-input__wrapper {
            background-color: transparent;

            input {
                color: gray;
            }
        }
    }

    .el-button {
        display: block;
        width: 80%;
        height: 45px;
        // margin: auto;
        background-color: #1890ff;
        border: none;
        color: white;
    }
}
</style>